<!-- 滚动组件-->
<template>
  <div class="item" :id="`anchor-${obj.activityTagNo}`">
    <p
      class="info"
      :class="{
        activityTag0: activityTagName == activityTag[0],
        activityTag1: activityTagName == activityTag[1],
        activityTag2: activityTagName == activityTag[2],
        activityTag3: activityTagName == activityTag[3],
        activityTag4: activityTagName == activityTag[4],
        activityTag5: activityTagName == activityTag[5],
        activityTag6: activityTagName == activityTag[6],
        activityTag7: activityTagName == activityTag[7],
        activityTag8: activityTagName == activityTag[8],
        activityTag9: activityTagName == activityTag[9],
        activityTag10: activityTagName == activityTag[10],
        activityTag11: activityTagName == activityTag[11],
        activityTag12: activityTagName == activityTag[12],
        activityTag13: activityTagName == activityTag[13]
      }"
    >
      {{ activityTagName }}TOP榜<span @click="goList(obj)">更多</span>
    </p>
    <!-- <div style="height: 150px; overflow: hidden">hide scroller</div> -->
    <div style="overflow:hidden; background:#fff; width: 100%; clear: both;">
      <div class="imgs">
        <ul>
          <li
            class="item-single"
            v-for="(v, i) in obj.list"
            :key="i"
            @click="goDetail(v)"
          >
            <em
              :class="{
                top0: i === 0,
                top1: i === 1,
                top2: i === 2
              }"
            ></em>
            <div
              class="brand-img"
              :style="{
                backgroundImage: `url('${bgImage(v.productPicUrlImg)}')`
              }"
            ></div>
            <p class="brands-name">
              {{ v.productName }}
            </p>
            <p class="brands-price">
              ¥{{ v.price }}<span>¥{{ v.tagPrice }}</span>
            </p>
          </li>
          <li class="more" @click="goList(obj)">
            <div><span>查看全部</span><i class="item_pro_more"></i></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { formatImgUrl } from '@/utils/util';

export default {
  props: {
    obj: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      activityTagName: '',
      activityTag: [
        '女装',
        '童装',
        '男装',
        '国际',
        '内衣',
        '美妆',
        '大牌清仓',
        '鞋靴',
        '箱包',
        '运动',
        '家居',
        '饰品',
        '数码家电',
        '食品'
      ]
    };
  },
  computed: {},
  created() {
    this.activityTagName = this.obj.activityTagName;
  },
  methods: {
    bgImage(imgUrl) {
      const width = 133; // 根据iOS最大宽度换算而来 （120/375）* 414
      const height = 133;
      return (imgUrl && formatImgUrl(imgUrl, width, height)) || '';
    },
    goList(v) {
      console.log(v);
    },
    goDetail(val) {
      console.log(val);
    }
  }
};
</script>
<style scoped lang="scss">
.activityTag0 {
  background: linear-gradient(
    135deg,
    rgba(255, 93, 78, 1) 0%,
    rgba(240, 0, 121, 1) 100%
  );
}
.activityTag1 {
  background: linear-gradient(
    315deg,
    rgba(255, 131, 35, 1) 0%,
    rgba(255, 195, 37, 1) 100%
  );
}
.activityTag2 {
  background: linear-gradient(
    135deg,
    rgba(73, 125, 242, 1) 0%,
    rgba(117, 68, 238, 1) 100%
  );
}
.activityTag3 {
  background: linear-gradient(
    135deg,
    rgba(142, 101, 255, 1) 0%,
    rgba(170, 0, 217, 1) 100%
  );
}
.activityTag4 {
  background: linear-gradient(
    135deg,
    rgba(255, 131, 97, 1) 0%,
    rgba(255, 24, 79, 1) 100%
  );
}
.activityTag5 {
  background: linear-gradient(
    315deg,
    rgba(178, 0, 255, 1) 0%,
    rgba(255, 38, 108, 1) 100%
  );
}
.activityTag6 {
  background: linear-gradient(
    135deg,
    rgba(255, 88, 88, 1) 0%,
    rgba(242, 23, 23, 1) 100%
  );
}
.activityTag7 {
  background: linear-gradient(
    135deg,
    rgba(85, 192, 201, 1) 0%,
    rgba(63, 118, 231, 1) 100%
  );
}
.activityTag8 {
  background: linear-gradient(
    135deg,
    rgba(107, 128, 247, 1) 0%,
    rgba(115, 111, 233, 1) 100%
  );
}
.activityTag9 {
  background: linear-gradient(
    135deg,
    rgba(168, 160, 205, 1) 0%,
    rgba(102, 99, 174, 1) 100%
  );
}
.activityTag10 {
  background: linear-gradient(
    135deg,
    rgba(237, 189, 140, 1) 0%,
    rgba(209, 135, 94, 1) 100%
  );
}
.activityTag11 {
  background: linear-gradient(
    135deg,
    rgba(142, 101, 255, 1) 0%,
    rgba(170, 0, 217, 1) 100%
  );
}
.activityTag12 {
  background: linear-gradient(
    135deg,
    rgba(73, 125, 242, 1) 0%,
    rgba(117, 68, 238, 1) 100%
  );
}
.activityTag13 {
  background: linear-gradient(
    315deg,
    rgba(255, 109, 24, 1) 0%,
    rgba(255, 166, 33, 1) 100%
  );
}
.item {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 8px;
  .info {
    width: 97.87%;
    border-radius: 0 100px 100px 0;
    height: 36px;
    line-height: 36px;
    font-size: 15px;
    color: #fff;
    padding: 0 14px 0 12px;
    box-sizing: border-box;
    span {
      float: right;
      font-size: 12px;
      background: url('../../../../assets/promotion/icon_rigin_arrow.png')
        no-repeat right center / 5px 10px;
      padding-right: 8px;
    }
  }
}
.imgs {
  white-space: nowrap;
  // padding: 0 0 .12rem 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: left;
  height: 160px;
  padding: 12px 12px 8px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* 用于 ios5+ */
  ul {
    li {
      height: 135px;
      position: relative;
      overflow: hidden;
      margin-right: 8px;
      display: inline-block;

      width: 100px;
      em {
        width: 22px;
        height: 22px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        display: block;
      }
      .top0 {
        background: url('../../../../assets/promotion/No1.png') no-repeat left
          top/ 22px 22px;
      }
      .top1 {
        background: url('../../../../assets/promotion/No2.png') no-repeat left
          top/ 22px 22px;
      }
      .top2 {
        background: url('../../../../assets/promotion/No3.png') no-repeat left
          top/ 22px 22px;
      }
      .brand-img {
        width: 100px;
        height: 100px;
        display: block;
        margin-bottom: 3px;
        border-radius: 6px;
        background-color: #f8f8f8;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      .brands-name {
        color: #333333;
        font-size: 11px;
        width: 99px;
        line-height: 16px;
        margin-bottom: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .brands-price {
        color: #e62525;
        font-size: 13px;
        span {
          text-decoration: line-through;
          color: #999999;
          font-size: 11px;
          margin-left: 5px;
        }
      }
    }
  }
  .more {
    text-align: center;
    background: #f7f7f7;
    color: #999999;
    font-size: 11px;
    vertical-align: top;
    position: relative;
    div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      line-height: 28px;
      margin-top: 49px;
      span {
        margin-bottom: 3px;
        display: block;
      }
      .item_pro_more {
        width: 14px;
        height: 14px;
        background: url('../../../../assets/promotion/item_pro_more.png')
          no-repeat left center / 14px 14px;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
</style>
